<template>
<!--    驿站管理  -->
    <div class="station">

<!--        搜索  -->
        <div class="search">
            <div class="search_store">
                <p>驿站名称:</p>
                <input type="text" v-model="searchStation.stationName">
            </div>
            <div class="search_store">
                <p>小区名称:</p>
                <input type="text" v-model="searchStation.community">
            </div>
            <div class="block">
                <span class="demonstration">添加时间:</span>
                <el-date-picker
                        v-model="searchStation.stationDate"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div class="search_button">
                <el-button type="primary" @click="searchStationArr">搜索</el-button>
            </div>
        </div>

        <div>
            <div class="add_store">
                <el-button type="primary" @click="AddStation">添加驿站</el-button>
            </div>
        </div>

        <!--        表格 -->
        <el-table :cell-style="rowStyle"
                :data="stationData.list"
                border
                :header-cell-style="{'background-color':'#409EFF', color:'#fff'}"
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="courierStationId"
                    label="ID"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="courierStationName"
                    label="驿站名字"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="courierStationImage"
                    label="驿站照片"
                    align="center">
            </el-table-column>
            <el-table-column
                    :prop="'courierStationProvince'+'courierStationCity'+'courierStationDistrict'+'courierStationAddress'"
                    label="驿站地址"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="courierStationCommunityName"
                    label="所在小区"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="courierStationOrderCount"
                    label="订单总数"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="addTime"
                    label="添加时间"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="courierStationStatus"
                    label="状态"
                    align="center">
                <template slot-scope="scope">
                <el-tag v-if="scope.row.courierStationStatus == 1" style="color: #00B95A">上架</el-tag>
                <el-tag v-else style="color: #B90006">下架</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    align="center">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.courierStationStatus == 0" @click="stationClickOn(scope.row)"
                               type="text" size="small">立即上架</el-button>
                    <el-button v-else @click="stationClickUp(scope.row)" type="text" size="small">立即下架</el-button>
                    <el-button type="text" size="small" @click="editStation(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="block">
            <el-pagination @current-change="pageChange" :current-page="page"
                           layout="prev, pager, next"
                           :total="stationData.total">
            </el-pagination>
        </div>

<!--        弹框  -->
        <div>

            <!--            添加驿站  -->
            <el-dialog title="添加驿站" :visible.sync="dialogStationVisible">
                <el-form :model="newStation">
                    <el-form-item label="驿站名字" :label-width="'110px'">
                        <el-input v-model="newStation.stationName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="驿站图片" :label-width="'110px'">

                    </el-form-item>
                    <el-form-item label="所属地区" :label-width="'110px'">
                        <el-cascader
                                clearable
                                v-model="newStation.stationAddress"
                                :options="addressAll"
                                :props="{value:'label'}">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item :label-width="'110px'">
                        <el-input v-model="newStation.addressDetail" autocomplete="off" placeholder="请填写详细地址"></el-input>
                    </el-form-item>
                    <el-form-item label="所属小区" :label-width="'110px'">
                        <el-select v-model="newStation.communityId" placeholder="请选择所属小区">
                            <el-option
                                    v-for="item in communityData.list"
                                    :key="item.communityId"
                                    :label="item.communityName + '(' + item.communityProvince + item.communityCity + item.communityDistrict + item.communityAddress + ')'"
                                    :value="item.communityId">
                            </el-option>
                        </el-select>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogStationVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addStationToCommunity">确 定</el-button>
                </div>
            </el-dialog>

            <!--            编辑驿站  -->
            <el-dialog title="编辑驿站" :visible.sync="dialogEditStationVisible">
                <el-form :model="oldStation">
                    <el-form-item label="驿站名字" :label-width="'110px'">
                        <el-input v-model="oldStation.courierStationName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="驿站图片" :label-width="'110px'">

                    </el-form-item>
                    <el-form-item label="所属地区" :label-width="'110px'">
                        <el-cascader
                                clearable
                                v-model="oldStationAddress"
                                :options="addressAll"
                                :props="{value:'label'}">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item :label-width="'110px'">
                        <el-input v-model="oldStation.courierStationAddress" autocomplete="off" placeholder="请填写详细地址"></el-input>
                    </el-form-item>
                    <el-form-item label="所属小区" :label-width="'110px'">
                        <el-select v-model="oldCommunityId" placeholder="请选择所属小区">
                            <el-option
                                    v-for="item in communityData.list"
                                    :key="item.communityId"
                                    :label="item.communityName + '(' + item.communityProvince + item.communityCity + item.communityDistrict + item.communityAddress + ')'"
                                    :value="item.communityId">
                            </el-option>
                        </el-select>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogEditStationVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addStationToCommunity">确 定</el-button>
                </div>
            </el-dialog>

        </div>
    </div>


</template>

<script>
    export default {
        name: "StationManagement",
        data: function () {
            return {
                stationData: {},
                communityData: {},
                value1: "",
                page: 1,
                addressAll:[],
                searchStation: { // 搜索
                    stationName: '',
                    community: '',
                    stationDate: ['',''],
                },
                dialogStationVisible: false,
                newStation:{  // 新增
                    stationName:'',
                    stationImg: '',
                    stationAddress: [],
                    addressDetail: '',
                    communityId: '',
                },
                dialogEditStationVisible: false,
                oldStation:{}, // 编辑当前驿站
                oldStationAddress: [], // 当前驿站的 省 市 县
                oldCommunityId: '',
            }
        },
        created() {
            this.getStationData();
            this.getCommunityData();
            this.getAllProvinceAndCityList();
        },
        methods: {
            getStationData(){
                this.axios.request("courierStation/querySearchCourierStationList", {
                    params: {
                        pageNum: 1,
                        pageSize: 10,
                        courierStationName: '',
                        communityName: '',
                        courierStationStatus: '',
                        startTime: '',
                        endTime: '',
                    }
                }).then((res) => {
                    this.stationData = res.data.data;
                    console.log(this.stationData)

                }).catch((err) => {
                    console.log(err)
                });
            },
            getCommunityData(){
                this.axios.request("community/communityList", {
                    params: {
                        pageNum: 1,
                        pageSize: 9999999,
                    }
                }).then((res) => {
                    this.communityData = res.data.data;
                    console.log(this.communityData)
                }).catch((err) => {
                    console.log(err)
                });
            },
            //获取省 市 县
            getAllProvinceAndCityList() {
                // 获取全国所有省份和城市的列表
                var that = this;
                this.$http
                    .get("https://restapi.amap.com/v3/config/district", {
                        // 高德地图的API
                        params: {
                            key: "dab57453101d48a50baa5b2088f29e7f", // 这个是申请的 Key，读者自行写入
                            keywords: "中国",
                            subdistrict: 3,
                            extensions: "base",
                        },
                    })
                    .then((response) => {
                        console.log(response.data)
                        for(let i = 0;i<response.data.districts[0].districts.length;i++){
                            let provinceMap = new Map();
                            provinceMap.value = response.data.districts[0].districts[i].adcode;   //区域编号
                            provinceMap.label = response.data.districts[0].districts[i].name;     //省名称
                            provinceMap.children = [];
                            that.addressAll.push(provinceMap);  //添加省份
                            for(let j = 0;j < response.data.districts[0].districts[i].districts.length;j++){
                                let cityMap = new Map()
                                cityMap.value = response.data.districts[0].districts[i].districts[j].adcode;   //区域编号
                                cityMap.label = response.data.districts[0].districts[i].districts[j].name;     //市名称
                                cityMap.children = [];
                                provinceMap.children.push(cityMap); //添加市
                                for(let k = 0;k <response.data.districts[0].districts[i].districts[j].districts.length;k++){
                                    let areaMap = new Map()
                                    areaMap.value = response.data.districts[0].districts[i].districts[j].districts[k].adcode;   //区域编号
                                    areaMap.label = response.data.districts[0].districts[i].districts[j].districts[k].name;     //区县名称
                                    cityMap.children.push(areaMap);   //添加区县
                                }
                            }
                        }
                    });
            },
            // 点击"上架"
            stationClickOn(row) {
                this.axios.post('/courierStation/modifyCourierStation',{
                    courierStationId: row.courierStationId,
                    courierStationStatus: 1,
                }).then((res)=>{
                    this.getStationData()
                })
            },
            // 点击"下架"
            stationClickUp(row){
                this.axios.post('/courierStation/modifyCourierStation',{
                    courierStationId: row.courierStationId,
                    courierStationStatus: 0,
                }).then((res)=>{
                    this.getStationData()
                })
            },
            // 表格内容居中
            rowStyle(){
                return "text-align: center";
            },
            // 点击页码切换页面数据内容
            pageChange(val){
                // console.log(val)
                this.page = val;
                this.axios.request("courierStation/querySearchCourierStationList", {
                    params: {
                        pageNum: val,
                        pageSize: 10,
                        courierStationName: '',
                        communityName: '',
                        courierStationStatus: '',
                        startTime: '',
                        endTime: '',
                    }
                }).then((res) => {
                    this.stationData = res.data.data;
                }).catch((err) => {
                    console.log(err)
                });
            },
            // 搜索
            searchStationArr(){
                this.axios.request("courierStation/querySearchCourierStationList", {
                    params: {
                        pageNum: 1,
                        pageSize: 10,
                        courierStationName: this.searchStation.stationName,
                        communityName: this.searchStation.community,
                        courierStationStatus: '',
                        startTime: this.searchStation.stationDate[0],
                        endTime: this.searchStation.stationDate[1],
                    }
                }).then((res) => {
                    this.stationData = res.data.data;
                    console.log(this.stationData)
                }).catch((err) => {
                    console.log(err)
                });
            },
            // 添加驿站
            AddStation(){
                this.dialogStationVisible = true;
            },
            // 新增驿站的 确定按钮
            addStationToCommunity(){
                // console.log(this.newStation)
                this.dialogStationVisible = false;
                this.axios.post('/courierStation/addCourierStation',{
                    courierStationAddress: this.newStation.addressDetail,
                    courierStationCity: this.newStation.stationAddress[1],
                    courierStationCommunityId: this.newStation.communityId,
                    courierStationDistrict: this.newStation.stationAddress[2],
                    courierStationImage: this.newStation.stationImg,
                    courierStationName: this.newStation.stationName,
                    courierStationProvince: this.newStation.stationAddress[0],
                }).then((res)=>{
                    this.getStationData();
                    this.oldStationAddress = [];
                })

            },

            // 编辑按钮
            editStation(row){

                this.oldStation = row;
                this.oldStationAddress[0] = row.courierStationProvince;
                this.oldStationAddress[1] = row.courierStationCity;
                this.oldStationAddress[2] = row.courierStationDistrict;
                this.oldCommunityId = row.courierStationCommunityId;
                this.dialogEditStationVisible = true;
                console.log("this.oldStation", this.oldStation)
                console.log("this.oldStationAddress", this.oldStationAddress)
            },

        }
    }
</script>

<style scoped>

    .station{
        width: 97%;
        padding: 1.5%;
        /*background-color: #c1ff69;*/
    }

    .search{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .search .search_store{
        width: 280px;
        height: 50px;
        /*background-color: #2D93CA;*/
        margin-right: 10px;
    }
    .search_store>p{
        line-height: 50px;
        float: left;
        margin-right: 10px;
    }
    .search_store>input{
        width: 60%;
        line-height: 35px;
        float: left;
        margin-top: 7px;
        padding-left: 10px;
        outline: none;
        border-radius: 3px;
        border: 1px solid #dddddd;
    }
    .block{
        /*background-color: #00F7DE;*/
        margin-right: 20px;
    }
    .demonstration{
        margin-right: 10px;
        line-height: 50px;
    }
    .search_button{
        line-height: 50px;
    }
    .add_store{
        margin: 20px 0;
    }

</style>